<template>
  <div class="userInfo">
    <div class="top">
      <van-icon @click="$router.back()" name="arrow-left" />
      <p>个人信息</p>
    </div>
    <div class="list">
      <info-list title="头像">
        <img :src="userInfo.avatar"/>
      </info-list>

      <info-list title="昵称">
        <span>{{userInfo.nickname}}</span>
      </info-list>
      
      <info-list :att="userInfo.mobile" title="手机号">
        <span>{{userInfo.mobile}}</span>
      </info-list>
      <info-list :att="userInfo.nickname" title="性别">
        <span>{{userInfo.sex==3?'女':'男'}}</span>
      </info-list>
      <info-list title="出生日期">
        <span>{{userInfo.birthday}}</span>
      </info-list>
      <info-list title="所在城市">
        <span>{{userInfo.city_name}}</span>
      </info-list>
      <info-list title="学科">
        <span>{{userInfo.province_name}}</span>
      </info-list>
    </div>
  </div>
</template>
<script>
import infoList from "@/components/infoList";
import { getUserInfo } from "../../request/home";
import { reactive, toRefs } from "vue";
export default {
  components: {
    infoList
  },
  setup(props) {
    getUserInfo().then(res => {
      console.log(res);
      data.userInfo = res.data.data;
    });
    const data = reactive({
      userInfo: {}
    });
    return{...toRefs(data)}
  }
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  padding: 20px 10px;
  align-items: center;
  font-size: 26px;
  border-bottom: 1px solid #ccc;
  p {
    width: 90%;
    text-align: center;
  }
}
img{
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin-right: 20px;
}
</style>
